const path= require("path");
const {CleanWebpackPlugin}=require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require('webpack')
// 导入抽取CSS样式文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 导入优化压缩CSS样式表的插件
const vueloaderplugin=require("vue-loader/lib/plugin");
  
module.exports={
    mode : 'production' ,
        entry:{
            app:path.join(__dirname,"./src/main.js"),//输入文件
            vendors:['vuex','vue','vue-router','axios','mint-ui','vue-preview']
        },
        output:{
            path:path.join(__dirname,"./dist"),//输出文件
            filename:"js/index.js" //文件名
        },
    plugins: [//插件配置节点
        //配置vue插件
        new HtmlWebpackPlugin({//
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html',
            minify: {
                removeComments:true,
                collapseBooleanAttributes:true,
                removeAttributeQuotes:true
            }
        }),
        new vueloaderplugin(),
        new CleanWebpackPlugin(), // 指定每次重新发布的时候，要先删除的文件夹
        new webpack.DefinePlugin({ // 此插件的作用，相当于在项目的全局，配置了一些全局可用的变量；将来，我们引用的第三方包中，比如Vue，会检查webpack中有没有提供 process.env.NODE_ENV 字段，如果有，并且字段的名字为 "production"， 就表示是生产发布环境，那么会移除不必要的Vue警告功能；并做其它优化！
          'process.env.NODE_ENV': '"production"',
          'myVar': '"1234"'
        }),
        new MiniCssExtractPlugin({
            filename:'css/style.css',
            chunkFilename: '[id].css',
        }),
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "vendors",
                    chunks: "initial",
                    filename: 'js/vendors.js',
                    minChunks: 2
                }
            }
        }
    },
    module: {//配置第三方loader 模块的
        rules: [
            {
                //处理css的loader
                test:/\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader"]
            },
            {
                //处理less的loader
                test:/\.less$/,use:[MiniCssExtractPlugin.loader,"css-loader","less-loader"]
            },
            {
                //处理scss的loader
                test:/\.scss$/,use:[MiniCssExtractPlugin.loader,"css-loader","sass-loader" ]
            },
            {
                //处理图片的loader
               // test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=7000&name=[hash:8]-[name].[ext]"
                test: /\.jpg|png|gif|bmp$/, use: 'url-loader?esModule=false&limit=7631&name=images/[hash:8]-[name].[ext]' 
            },
            {
                //处理字体的loader  
                test:/\.ttf|eot|svg|woff|woff2$/,use:"url-loader",
                //test: /\.ttf|woff|woff2|eot|svg$/, use: 'url-loader' 
            },
            {
                //配置babel处理高级es语法
               // test:/\.js$/,use:"babal-loader", exclude:"/node_modules/"
            },
            {
                test:/\.vue$/,use:"vue-loader"
            }
        ]
    },
    resolve:{
       // alias: {//修改vue被导入时候包的路径
            //"vue$":"vue/dist/vue.js"
        //}
    }

};